const $ = require("jquery")
require("bootstrap/dist/css/bootstrap.css")
import {getId} from "./module.js"
$(function () {
    $(".title h1").html(decodeURIComponent(`${getId("name")}`)+"的热门歌曲")
    $.ajax({
        url:`http://localhost:3000/artist/songs?id=${getId("id")}`,
        success(res){
            let songs = res.songs
            songs.forEach(function (item,index) {
                console.log(item)
                const {name,id,ar} = item
                const singers = ar.map((art)=>`<a href="./singer.html?id=${art.id}&name=${art.name}">${art.name}</a>`)
                $(`<tr>
                        <th scope="row">${index+1}</th>
                        <td>${name}</td>
                        <td class="singer">${singers}</td>
                        <td><button data-id=${id}>播放</button></td>
                       </tr>
                 `).appendTo("#music-list tbody")
            })
        }
    })
    let flag = false
    $("#music-list tbody").on("click","button",function () {
        const ID = $(this).data("id")
        const url = `https://music.163.com/song/media/outer/url?id=${ID}.mp3`
        $("#mp3").attr("src",url)
        if (!flag){
            $("#mp3")[0].play()
            $(this).text("播放ing...").parent().parent().siblings().find("button").text("播放")
            flag = true
        }else {
            $("#mp3")[0].pause()
            $(this).text("播放").parent().parent().siblings().find("button").text("播放")
            flag = false
        }
    })
})